<template>
  <div>
      <h1 class="h1">我是状态的Mutation学习页面</h1>
      姓名：<input type="text" @change="handleChange">
      <p>状态中的name值：{{$store.state.name}}</p>
      学校：<input type="text" @change="changeShcool">
      <p>状态中的school值：{{$store.state.school}}</p>
      电话：<input type="text" @change="changeMobile">
      <p>状态中的mobile值：{{$store.state.mobile}}</p>
      性别：<input type="text" @change="setSex($event.target.value)">
      <p>状态中的sex值：{{$store.state.sex}}</p>
      <div>
          <router-link to="/helloStore">回到HelloStore</router-link>
      </div>
  </div>
</template>

<script>

// 辅助函数，便于获取state中的值
import { mapMutations } from 'vuex';

export default {
    name: "HelloMutations",
    methods: {
        handleChange(e) {
            console.log(e.target.value);
            // commit提交到mutation中，使用mutation的方法更改状态值，
            // 第一个参数是方法名的字符串
            // 第二个参数，要提交更改的值
            this.$store.commit("setName",e.target.value);
        },
        changeShcool(e) {
            this.$store.commit("setSchool",e.target.value);
        },
        changeMobile(e) {
            // 使用mapMutations结构出来的函数
            this.setMobile(e.target.value);
        },
        ...mapMutations(["setMobile","setSex"])
    },
}
</script>

<style scoped>
    .h1 {
        color: rgb(37, 168, 55);
    }

</style>
